<template>
  <div class="right-management-container">
    <el-card>
  <el-table :data="rightList" border style="width: 100%" row-key="right_id" size="small" class="compact-table">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="right_name" label="菜单名称" width="180" />
        <el-table-column prop="right_api" label="API地址" />
        <el-table-column prop="right_path" label="URL地址" />
        <el-table-column prop="right_icon" label="图标" width="80" class-name="col-icon">
          <template #default="{ row }">
            <i v-html="row.right_icon"></i>
          </template>
        </el-table-column>
        <el-table-column label="包含操作">
          <template #default="{ row }">
            <el-tag v-if="row.right_function & 1" type="primary" size="small" style="margin-right: 6px">GET:查询</el-tag>
            <el-tag v-if="row.right_function & 2" type="success" size="small" style="margin-right: 6px">POST:添加</el-tag>
            <el-tag v-if="row.right_function & 4" type="warning" size="small" style="margin-right: 6px">PUT:更新</el-tag>
            <el-tag v-if="row.right_function & 8" type="danger" size="small">DELETE:删除</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getRightListAPI } from '@/api/root/right'

const rightList = ref([])

const fetchRightList = async () => {
  const res = await getRightListAPI()
  if (res) {
    rightList.value = res
  }
}

onMounted(() => {
  fetchRightList()
})
</script>

<style scoped>
.right-management-container {
  padding: 8px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.el-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  border: none;
  background: transparent;
}
.el-card :deep(.el-card__body) {
  flex: 1;
  overflow: auto;
  padding: 0;
}
.el-card :deep(.el-card__header) { display: none; }
/* 对齐到示例图尺寸：字号12、行高≈28px、标签≈20px */
.compact-table :deep(.el-table__cell) { padding: 2px 8px !important; }
.compact-table :deep(.el-table__header th .cell),
.compact-table :deep(.el-table__body td .cell) {
  padding: 0 !important;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.compact-table :deep(.el-table__header tr) { height: 30px; }
.compact-table :deep(.el-table__body tr) { height: 30px; }
.compact-table :deep(td.col-icon .cell i) {
  font-size: 18px !important;
  line-height: 18px !important;
  height: 18px;
  display: inline-flex;
  align-items: center;
}
.compact-table :deep(.el-tag--small) { font-size: 12px; line-height: 18px; height: 20px; padding: 0 6px; margin-right: 6px; }
</style>
